<template>
	<view class="app-login">
		<view :class="['app-login-bg']">
			<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/app-login/app-login-bg.png" mode="aspectFill"></image>
			<view class="app-login-tit">手机号登录</view>
		</view>
		<view class="app-phone-login">
			<view class="app-phone-login-cell">
				<input placeholder="请输入手机号码" type="number" v-model="form.phone" />
				<text class="get-code" @click="getCode" v-if="!isSend">获取验证码</text>
				<text class="get-code isSend" v-else>{{count}}S后重新发送</text>
			</view>
			<view class="app-phone-login-cell"><input placeholder="请输入短信验证码" type="number" v-model="form.code" maxlength="6" /></view>
		</view>
		<view class="app-phone-login-btn" @click="phoneLogin">登录</view>
		<view class="app-ios-login" v-if="isReview && isIos13" @click="signInApple"><image src="https://master.jiaju01.com/web/static/icons/apple.png"></image>Sign in with Apple</view>
		<view class="enter-phone-agree" @click="agreeFun">
			<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/app-login/agree-default.png" v-if="!agree" mode="aspectFill"></image>
			<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/app-login/agree.png"  mode="aspectFill" v-else></image>
			<view class="enter-phone-agree-text">
				我已阅读并同意
				<text @click.stop="showProtocol">《用户协议》</text>
				及
				<text @click.stop="showPrivacy">《隐私政策》</text>
			</view>
		</view>
		<view class="app-wx-login" @click="wechatLogin" v-if="isInstallWX">
			<view class="wx-icon"><u-icon name="weixin-fill" size="50"></u-icon></view>
			<view class="tips">微信登录</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				agree: false,
				isReview: false,
				isIos13: false,
				form: {
					phone: '',
					code: ''
				},
				count: 60,
				isSend: false,
				isInstallWX: false
			};
		},
		onLoad() {
			// #ifdef APP-PLUS
			let systemInfo = uni.getSystemInfoSync()
			// 判断第三方程序(微信) 是否安装
			if(plus.runtime.isApplicationExist({pname:'com.tencent.mm',action:'weixin://'})){
				this.isInstallWX = true
			}else{
				this.isInstallWX = false
			}
			// #endif
		},
		onShow() {
			this.isReview = uni.getStorageSync('review')
			// #ifdef APP-PLUS
			let systemInfo = uni.getSystemInfoSync()
			plus.oauth.getServices((services) => {
				services.forEach(item => {
					if(item.id == 'apple'){
						this.isIos13 = true
					}
				})
			})
			// #endif
		},
		methods: {
			addFoot(where,detail){
				this.$u.api.AddFoot({
					// #ifdef MP-WEIXIN
					type: 1,
					// #endif
					// #ifdef APP-PLUS
					type: 2,
					// #endif
					// #ifdef H5
					type: 3,
					// #endif
					store_id: 1,
					client: 1,
					where: where,
					stay_time: 0,
					goods_id: 0,
					store_goods_id: 0,
					is_new: 1,
					detail: detail?detail:''
				})
			},
			// 登录之后获取客服二维码与电话并储存
			getShare(){
				let data = {
					paramter: 1,
					store_id: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_id:1
				}
				this.$u.api.StoreInfo(data).then(res => {
					let obj = {
						service_code: res.datas[0].store_service_code || res.datas[0].service_code,
						service_phone: res.datas[0].store_service_phone
					}
					uni.setStorageSync('serviceInfo',obj)
				})
			},
			agreeFun(){
				this.agree = !this.agree
			},
			showProtocol(){
				let url = 'https://jiaju01.cn/wap/html/protocol.html'
				uni.navigateTo({
					animationDuration: 500,
					url: '/pages/webview/webview?url=' + encodeURIComponent(url)
				})
			},
			showPrivacy(){
				let url = 'https://jiaju01.cn/wap/html/protocol.html'
				uni.navigateTo({
					animationDuration: 500,
					url: '/pages/webview/webview?url=' + encodeURIComponent(url)
				})
			},
			wechatLogin(e){
				let _this = this
				if(!this.agree){
					uni.showToast({
						icon: 'none',
						title: '请阅读并同意隐私政策及用户协议'
					})
					return false
				}
				// #ifdef H5
				uni.showToast({
					icon: 'none',
					title: 'H5微信授权登录暂未上线，请使用手机号登录或在小程序中使用微信登录',
					duration: 2000
				})
				// #endif
				// #ifdef APP-PLUS
				if(!this.agree){
					uni.showToast({
						icon: 'none',
						title: '请阅读并同意隐私政策及用户协议',
						duration: 1500
					})
					return false
				}
				let weixinService = null;
				plus.oauth.getServices((services) => {
					services.forEach(item => {
						if(item.id==='weixin'){
							weixinService = item
						}
					})
					if(!weixinService) {
						uni.showToast({
							icon: 'none',
							title: '没有微信登录授权服务'
						})
						return;
					}
					weixinService.authorize((e) => {
						console.log(e)
						let data = {
							code: e.code,
							parent_id: uni.getStorageSync('parent_id')?uni.getStorageSync('parent_id'):0,
							client_type: 1
						}
						_this.$u.api.WxLogin(data).then(res => {
							if(!res.datas.phone || res.datas.phone==0){
								uni.navigateTo({
									animationDuration: 500,
									url: '/pages/login/bind-phone'
								})
								return false
							}
							uni.setStorageSync('userInfo',JSON.stringify(res.datas))
							uni.showToast({
								title: '登录成功',
								icon: 'none',
								duration: 1500
							})
							this.addFoot('登陆页-微信登陆','#客户登录了，请注意查看客户详情')
							if(res.datas.is_show==2){
								uni.switchTab({
									url: '/pages/merchant/merchant'
								})
							}else{
								uni.switchTab({
									url: '/pages/index/index'
								})
							}
							if(res.datas.is_open==1){
								uni.setStorageSync('is_open',true)
							}else{
								uni.setStorageSync('is_open',false)
							}
						})
					},(err) => {
						if(err.message){
							if(err.message.indexOf('客户端未安装')!=-1){
								uni.showToast({
									icon: 'none',
									title: '未检测到您的微信客户端，无法使用微信登录',
									duration: 1500
								})
							}else{
								uni.showToast({
									icon: 'none',
									title: err.message
								})
							}
						}else{
							uni.showToast({
								icon: 'none',
								title: '未知错误'
							})
						}
					})
				})
				// #endif
			},
			getCode(){
				let phoneRexp = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[0-9])\d{8}$/;
				if(!this.form.phone){
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none',
						duration: 2000
					});
					return false;
				}else if(!phoneRexp.test(this.form.phone)) {
					uni.showToast({
						title: '请输入正确的手机号码',
						icon: 'none',
						duration: 2000
					});
					return false;
				}else{
					this.send()
				}
			},
			countDown() {
				var time = setInterval(() => {
					this.count--
					if (this.count < 1) {
						clearInterval(time)
						this.count = 60
						this.isSend = false
					}
				}, 1000)
			},
			send() {
				let data = {
					phone: this.form.phone,
					login_code: 'login'
				}
				this.$u.apiWei.PhoneGetCode(data).then(res => {
					this.isSend = true
					uni.showToast({
						icon: 'none',
						title: '发送成功',
						duration: 1500
					})
					this.countDown()
				})
			},
			phoneLogin(){
				if(!this.form.phone){
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none',
						duration: 1500
					});
					return false;
				}else if(!this.form.code){
					uni.showToast({
						title: '请输入验证码',
						icon: 'none',
						duration: 1500
					});
					return false;
				}else if(!this.agree){
					uni.showToast({
						title: '请阅读并同意隐私政策及用户协议',
						icon: 'none',
						duration: 2000
					});
					return false;
				}else{
					let data = {
						parent_id: uni.getStorageSync('parent_id')?uni.getStorageSync('parent_id'):'',
						//#ifdef MP-WEIXIN
						client: 1,
						// #endif
						//#ifdef APP-PLUS
						client: 2,
						// #endif
						//#ifdef H5
						client: 4,
						// #endif
						phone: this.form.phone,
						code: this.form.code
					}
					this.$u.apiWei.NewPhoneLogin(data).then(res => {
						uni.setStorageSync('userInfo', JSON.stringify(res.datas))
						if(res.datas.nickname==='0' && res.datas.heard_img==='0'){
							uni.navigateTo({
								animationDuration: 500,
								url: '/pages/bind-wx/bind-wx'
							})
							return
						}
						uni.showToast({
							title: '登录成功',
							icon: 'none',
							duration: 1500
						})
						this.addFoot('登陆页-手机号码登陆','#客户登录了，请注意查看客户详情')
						this.$u.api.StoreShow().then(res => {
							if(res.datas.is_show==2){
								uni.switchTab({
									url: '/pages/merchant/merchant'
								})
							}else{
								uni.switchTab({
									url: '/pages/index/index'
								})
							}
						})
						this.$nextTick(() => {
							this.getShare()
							this.$u.api.UserNoticeCount().then(res => {
								if(res.datas){
									if(res.datas > 99){
										this.$set(getApp().globalData.defaultMenu[getApp().globalData.defaultMenu.length-1],'count','99+')
										this.$set(getApp().globalData.merchantMenu[getApp().globalData.merchantMenu.length-1],'count','99+')
									}else{
										this.$set(getApp().globalData.defaultMenu[getApp().globalData.defaultMenu.length-1],'count',res.datas)
										this.$set(getApp().globalData.merchantMenu[getApp().globalData.merchantMenu.length-1],'count',res.datas)
									}
								}else{
									this.$set(getApp().globalData.defaultMenu[getApp().globalData.defaultMenu.length-1],'count',0)
									this.$set(getApp().globalData.merchantMenu[getApp().globalData.merchantMenu.length-1],'count',0)
								}
							})
						},200)
					})
				}
			},
			signInApple(){
				uni.login({
					provider: 'apple',
					success: (loginRes) => {
						uni.getUserInfo({
							provider: 'apple',
							success: (appleUserInfo) => {
								let data = {
									user: plus.device.uuid
								}
								this.$u.api.WxIosLogin(data).then(res => {
									let iosLoginRes = {}
									iosLoginRes.token = res.datas.token
									iosLoginRes.role_type = 1
									iosLoginRes.user_id = res.datas.user_id
									iosLoginRes.store_id = res.datas.store_id
									iosLoginRes.heard_img = res.datas.heard_img
									iosLoginRes.nickname = res.datas.nickname
									iosLoginRes.store_logo = res.datas.store_logo
									iosLoginRes.store_name = res.datas.store_name
									iosLoginRes.phone = res.datas.phone
									iosLoginRes.ios = true
									uni.setStorageSync('userInfo',JSON.stringify(iosLoginRes))
									uni.showToast({
										icon: 'none',
										title: '登录成功',
										duration: 1000
									})
									setTimeout(() => {
										uni.switchTab({
											url: '/pages/index/index'
										})
									},1000)
								})
							}
						})
					},
					fail: (err) => {
						uni.showToast({
							icon: 'none',
							title: '登录已取消'
						})
					}  
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f8f8f8;
	}
	.app-login{
		.app-login-bg{
			position: relative;
			image{
				width: 100%;
				height: 700rpx;
			}
			.app-login-tit{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
				color: #FFF;
				font-size: 42rpx;
			}
		}
		.app-phone-login{
			position: relative;
			background-color: #FFF;
			border-radius: 8rpx;
			margin: -100rpx 30rpx 0;
			padding: 0 55rpx;
			z-index: 1;
			.app-phone-login-cell{
				border-bottom: solid 2rpx #F2F2F2;
				display: flex;
				padding: 40rpx 0;
				&:last-child{
					border-bottom: none;
				}
				input{
					flex: 1;
					min-width: 0;
					height: 40rpx;
					line-height: 40rpx;
				}
				.get-code{
					font-size: 32rpx;
					color: #141414;
					font-weight: bold;
					&.isSend{
						color: #999;
					}
				}
			}
		}
		
		.app-phone-login-btn{
			height: 98rpx;
			line-height: 98rpx;
			text-align: center;
			margin: 55rpx 55rpx 0;
			background-color: #141414;
			color: #FFF;
			border-radius: 6pt;
			font-size: 36rpx;
		}
		
		.app-ios-login{
			height: 98rpx;
			line-height: 94rpx;
			border-radius: 6pt;
			border: solid 2rpx #000;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 36rpx;
			margin: 55rpx 55rpx 0;
			image{
				width: 50rpx;
				height: 50rpx;
				vertical-align: top;
				margin: -5rpx 10rpx 0 0;
			}
		}
		
		.enter-phone-agree {
			display: flex;
			align-items: center;
			justify-content: left;
			margin: 40rpx 55rpx 0;
			image{
				width: 45rpx;
				height: 45rpx;
				margin-right: 10rpx;
			}
			view{
				line-height: 52rpx;
				color: #9F9F9C;
				text-align: left;
				flex: 1;
				font-size: 26rpx;
				text{
					color: #141414;
				}
			}
		}
		
		.app-wx-login{
			text-align: center;
			margin-top: 50rpx;
			.wx-icon{
				width: 90rpx;
				height: 90rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
				border: solid 2rpx #7e7e7e;
				margin: 0 auto;
			}
			.tips{
				margin-top: 20rpx;
				font-size: 28rpx;
			}
		}
		
	}
</style>
